<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <!-- <nav-bar title="个人故事" :showBack="true"></nav-bar> -->
        <NavBar :showBack="true" :userName="userName" :isLoggedIn="!!userName" title="我的人生故事" />

        <!-- 主要内容区 -->
        <scroll-view scroll-y class="main-content">
            <!-- 故事封面和基本信息 -->
            <view class="story-header">
                <view class="story-cover-large">
                    <banner-swiper :banners="banners"> </banner-swiper>
                    <text class="story-tag">{{ story.tag }}</text>
                </view>

                <view class="story-header-info">
                    <text class="story-title-large">{{ story.title }}</text>
                    <view class="story-meta-large">
                        <view class="story-author-large">
                            <text>{{ story.author }}</text>
                        </view>
                        <!-- <view class="story-stats-large">
                            <text class="story-views">{{ story.views }}阅读</text>
                            <text class="story-likes">{{ story.likes }}喜欢</text>
                        </view> -->
                    </view>
                </view>
            </view>

            <!-- 内容导航 -->
            <view class="content-nav">
                <view class="nav-item" :class="{ active: activeTab === 'personal' }" @click="switchTab('personal')">
                    <text>个人故事</text>
                </view>
                <view class="nav-item" :class="{ active: activeTab === 'fiveQuestions' }"
                    @click="switchTab('fiveQuestions')">
                    <text>五道人生</text>
                </view>
                <view class="nav-item" :class="{ active: activeTab === 'keyMoments' }" @click="switchTab('keyMoments')">
                    <text>重要时刻</text>
                </view>
            </view>

            <!-- 个人故事内容 -->
            <view v-if="activeTab === 'personal'" class="tab-content personal-story">
                <view class="story-section">
                    <text class="section-title">{{ story.title }}</text>
                    <text class="story-content-text">{{ story.content }}</text>

                    <!-- 故事图片 -->
                    <view class="story-images">
                        <image v-for="(img, index) in story.images" :key="index" :src="img" mode="aspectFill"
                            class="story-image"></image>
                    </view>
                </view>
            </view>

            <!-- 五道人生内容 -->
            <view v-if="activeTab === 'fiveQuestions'" class="tab-content five-questions">
                <view class="question-card" v-for="(question, index) in fiveQuestions" :key="index">
                    <view class="question-header">
                        <!-- <text class="question-number">{{ index + 1 }} 、</text> -->
                        <text class="question-title">{{ index + 1 }} 、{{ question.title }}</text>
                    </view>
                    <text class="question-answer">{{ question.answer }}</text>
                </view>
            </view>

            <!-- 重要时刻内容 -->
            <view v-if="activeTab === 'keyMoments'" class="tab-content key-moments">
                <!-- 时间轴 -->
                <view class="timeline">
                    <scroll-view scroll-x class="timeline-scroll" show-scrollbar="false" @scroll="onTimelineScroll">
                        <view class="timeline-container">
                            <view v-for="(moment, index) in keyMoments" :key="index" class="timeline-item"
                                :class="{ active: currentMomentIndex === index }" @click="selectMoment(index)">
                                <view class="timeline-dot"></view>
                                <text class="timeline-date">{{ moment.date }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>

                <!-- 轮播图 -->
                <swiper class="moments-swiper" :current="currentMomentIndex" @change="onSwiperChange" :autoplay="true"
                    :circular="true" :interval="3000">
                    <swiper-item v-for="(moment, index) in keyMoments" :key="index" class="moment-slide">
                        <view class="moment-card">
                            <image :src="moment.image" mode="aspectFill" class="moment-image"></image>
                            <view class="moment-info">
                                <text class="moment-title">{{ moment.title }}</text>
                                <text class="moment-description">{{ moment.description }}</text>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import BannerSwiper from '@/components/BannerSwiper.vue'
import { getPersonalStory } from '@/api/story.js'

export default {
    components: {
        NavBar,
        BannerSwiper,
    },
    data() {
        return {
            banners: [
                // { image: '/assets/education/life-concept.png' },
                // { image: '/assets/education/life-meaning.png' },
                // { image: '/assets/education/life-value.png' }
            ], // 轮播图数据
            activeTab: 'personal',
            currentMomentIndex: 0,
            userId: '',
            story: {
                id: 1,
                title: '我的人生故事',
                author: '',
                tag: '人生',
                views: '0',
                likes: '0',
                content: '',
                images: [
                    '/static/story-image1.jpg',
                    '/static/story-image2.jpg'
                ]
            },
            fiveQuestions: [
                {
                    title: '【道谢】想感谢的人们',
                    answer: ''
                },
                {
                    title: '【道歉】倾诉心中歉意',
                    answer: ''
                },
                {
                    title: '【道爱】表达心中的爱',
                    answer: ''
                },
                {
                    title: '【道别】亲口说声再见',
                    answer: ''
                },
                {
                    title: '【道愿】诉说人生遗憾',
                    answer: ''
                }
            ],
            keyMoments: [
                {
                    date: '1980',
                    title: '求学时光',
                    description: '在村里的小学读书，虽然条件艰苦，但求知的欲望让我永远保持着对知识的渴望。',
                    image: '/static/moment-image1.jpg'
                },
                {
                    date: '1998',
                    title: '大学梦想',
                    description: '考入大学，开启了人生的新篇章，也是我的人生重要转折点。',
                    image: '/static/moment-image2.jpg'
                },
                {
                    date: '2002',
                    title: '初入职场',
                    description: '大学毕业后进入一家企业工作，开始了职业生涯的探索。',
                    image: '/static/moment-image3.jpg'
                },
                {
                    date: '2008',
                    title: '创业之路',
                    description: '辞去工作，开始创业。虽然充满挑战，但也让我收获了宝贵的经验。',
                    image: '/static/moment-image4.jpg'
                },
                {
                    date: '2015',
                    title: '事业有成',
                    description: '公司步入正轨，开始有了稳定的发展，也实现了当初的创业梦想。',
                    image: '/static/moment-image5.jpg'
                },
                {
                    date: '2023',
                    title: '回馈社会',
                    description: '开始参与公益事业，希望用自己的经验和资源帮助更多需要帮助的人。',
                    image: '/static/moment-image6.jpg'
                }
            ]
        };
    },
    onLoad() {
        // 从本地存储获取用户信息
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo && userInfo.isLoggedIn) {
            this.userName = userInfo.userName;
            this.userId = userInfo.userId || '1001'; // 默认使用1001作为测试ID

            // 获取个人故事数据
            this.fetchPersonalStory();
        } else {
            // 未登录状态，可以跳转到登录页或使用默认数据
            uni.showToast({
                title: '请先登录',
                icon: 'none',
                duration: 2000,
                complete: () => {
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/login/login'
                        });
                    }, 2000);
                }
            });
        }
    },
    methods: {
        // 获取个人故事数据
        fetchPersonalStory() {
            uni.showLoading({
                title: '加载中...'
            });
            console.log("userId", this.userId);
            getPersonalStory(this.userId)
                .then(response => {
                    // 更新故事数据
                    console.log("response", response);
                    if (response && response.success && response.data && response.data.length > 0) {
                        const data = response.data[0];
                        console.log("data", data);
                        // 更新个人故事内容
                        this.story.title = data.storyTitle || '我的人生故事';
                        this.story.author = this.userName || '未知用户';
                        this.story.tag = data.storyTag || '人生';
                        this.story.content = data.storyLife || '暂无内容';

                        // // 更新故事图片
                        // if (data.story_images) {
                        //     try {
                        //         this.story.images = JSON.parse(data.story_images);
                        //     } catch (e) {
                        //         console.error('解析故事图片数据失败:', e);
                        //         this.story.images = [];
                        //     }
                        // }

                        // 更新五道人生内容
                        this.fiveQuestions[0].answer = data.fimThanks || '暂无内容';
                        this.fiveQuestions[1].answer = data.fimApology || '暂无内容';
                        this.fiveQuestions[2].answer = data.fimLove || '暂无内容';
                        this.fiveQuestions[3].answer = data.fimFarewell || '暂无内容';
                        this.fiveQuestions[4].answer = data.fimWish || '暂无内容';

                        // 更新重要时刻数据
                        if (data.keyMoments) {
                            try {
                                this.keyMoments = JSON.parse(data.keyMoments);
                            } catch (e) {
                                console.error('解析重要时刻数据失败:', e);
                            }
                        }
                    }
                })
                .catch(err => {
                    console.error('获取故事数据失败:', err.message || err);
                    uni.showToast({
                        title: err.message || '获取数据失败',
                        icon: 'none'
                    });
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },

        switchTab(tab) {
            this.activeTab = tab;
        },
        selectMoment(index) {
            this.currentMomentIndex = index;
        },
        onSwiperChange(e) {
            this.currentMomentIndex = e.detail.current;
        },
        onTimelineScroll(e) {
            // 处理时间轴滚动逻辑
        }
    }
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
}

.main-content {
    flex: 1;
    padding-bottom: 30rpx;
    height: 84vh;
}

/* 故事头部样式 */
.story-header {
    position: relative;
    margin-bottom: 30rpx;
}

.story-cover-large {
    height: 400rpx;
    background-color: #e0e0e0;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    border-radius: 0 0 30rpx 30rpx;
    overflow: hidden;
}

.story-tag {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
}

.story-header-info {
    padding: 30rpx;
    background-color: white;
    border-radius: 20rpx;
    margin: -50rpx 30rpx 0;
    position: relative;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.story-title-large {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
}

.story-meta-large {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.story-author-large {
    font-size: 28rpx;
    color: #666;
}

.story-stats-large {
    display: flex;
    gap: 20rpx;
}

.story-views,
.story-likes {
    font-size: 24rpx;
    color: #999;
}

/* 内容导航样式 */
.content-nav {
    display: flex;
    justify-content: space-around;
    background-color: white;
    padding: 20rpx 0;
    margin: 0 30rpx 30rpx;
    border-radius: 15rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.nav-item {
    padding: 15rpx 30rpx;
    border-radius: 10rpx;
    transition: all 0.3s;
}

.nav-item.active {
    background-color: #f0f0f0;
    font-weight: bold;
    color: #333;
}

/* 标签内容样式 */
.tab-content {
    padding: 0 30rpx;
    height: 50%;
}

/* 个人故事样式 */
.story-section {
    background-color: white;
    padding: 30rpx;
    border-radius: 15rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
}

.story-content-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30rpx;
    text-align: justify;
}

.story-images {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-top: 20rpx;
}

.story-image {
    width: 330rpx;
    height: 220rpx;
    border-radius: 10rpx;
}

/* 五道人生样式 */
.question-card {
    background-color: white;
    padding: 30rpx;
    border-radius: 15rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.question-header {
    margin-bottom: 20rpx;
}

.question-number {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 10rpx;
    display: block;
}

.question-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
}

.question-answer {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    text-align: justify;
}

/* 重要时刻样式 */
.timeline {
    margin: 30rpx 0;
    position: relative;
}

.timeline::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2rpx;
    background-color: #e0e0e0;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-scroll {
    white-space: nowrap;
    height: 120rpx;
    position: relative;
    z-index: 2;
}

.timeline-container {
    display: inline-flex;
    padding: 0 30rpx;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 40rpx;
    position: relative;
    cursor: pointer;
}

.timeline-dot {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #ccc;
    margin-bottom: 15rpx;
    transition: all 0.3s;
    position: relative;
    z-index: 3;
}

.timeline-item.active .timeline-dot {
    width: 25rpx;
    height: 25rpx;
    background-color: #68d583;
    border: 3rpx solid #23b147;
}

.timeline-date {
    font-size: 24rpx;
    color: #999;
    transition: all 0.3s;
}

.timeline-item.active .timeline-date {
    font-weight: bold;
    color: #333;
    font-size: 28rpx;
}

.moments-swiper {
    height: 600rpx;
    margin-top: 30rpx;
}

.moment-slide {
    padding: 10rpx;
}

.moment-card {
    background-color: white;
    border-radius: 15rpx;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.moment-image {
    width: 100%;
    height: 350rpx;
}

.moment-info {
    padding: 30rpx;
}

.moment-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
    display: block;
}

.moment-description {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
}
</style>